<template>
	<div>
		<el-button type="primary" icon="el-icon-plus" @click="visible = true">
			主要按钮
		</el-button>
		<ElButton type="danger">主要按钮</ElButton>

		<!-- 
      el-dialog 对话框组件
        title 标题
        visible 对话框显示隐藏
     -->
		<el-dialog title="提示" :visible.sync="visible">
			<!-- 插槽语法 -->
			<!-- 默认插槽 -->
			<span>这是一段信息</span>
			<!-- 命名插槽：旧语法 -->
			<!-- <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">
					确 定
				</el-button>
			</span> -->
			<!-- 命名插槽：新语法 -->
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">取 消</el-button>
					<el-button type="primary" @click="visible = false">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 
      el-carousel 轮播图
     -->
		<el-carousel height="150px">
			<!-- 默认插槽 -->
			<el-carousel-item v-for="item in 4" :key="item">
				<!-- 默认插槽 -->
				<h3 class="small">{{ item }}</h3>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
export default {
	name: "App",
	data() {
		return {
			visible: false,
		};
	},
};
</script>

<style>
.small {
	text-align: center;
	line-height: 150px;
	height: 100%;
	background-color: pink;
}
</style>
